<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.staticfile.org/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/bootstrap-datetimepicker.css">

    <link href="/css/common.css?v=2" rel="stylesheet">

    <title>Data Life</title>
</head>
<body>
<div class="container" id="app-main" v-cloak>
    <div class="row" style="padding-top: 5%">
        <div class="col-3">
            <p class="text-right"><a href="/record/index.html" class="btn btn-light">首页</a></p>
        </div>
        <div class="col-6">
            <h3 class="text-center">{{ record.name }}</h3>
        </div>
        <div class="col-3">
            <div class="dropdown">
                <button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown">切换</button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#" @click="goWeek">周</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#" @click="goYear">年</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-right">
            <span @click="monthOffset(-1)" class="custom-icon">
                <span class="fas fa-angle-left"></span>
            </span>
        </div>
        <div class="col-8">
            <input type='text' class="form-control text-center" id='date' v-model="recordDate" readonly/>
        </div>
        <div class="col-2">
            <span @click="monthOffset(1)" class="custom-icon">
                <span class="fas fa-angle-right"></span>
            </span>
        </div>
    </div>
    <div class="row" style="margin-top: 10%">
        <div class="col-12 custom-block">
            <p class="text-center custom-week"><span class="custom-weekend">日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span class="custom-weekend">六</span></p>
        </div>
    </div>
    <div class="row" v-for="(week, index) in month">
        <div class="col-12 custom-block">
            <p class="text-center"><span v-for="(day, innerIndex) in week"  @click="clickDay(index, innerIndex)" :class="{ 'custom-active': index == weekIndex && innerIndex == dayIndex }"><span :class="{ 'custom-day': !(index == weekIndex && innerIndex == dayIndex) }">{{ day.day }}</span><br>{{ day.sum != null ? day.sum : '' }}</span></p>
        </div>
    </div>
    <div class="row" style="margin-top: 5%">
        <div class="col-8 col-offset-2">
            <div class="row" v-for="recordItem in month[weekIndex][dayIndex].items" @click="clickModal(recordItem.id)">
                <div class="col-4"><p class="text-right">{{ recordItem.value }}</p></div><div class="col-8"><p>{{ recordItem.comment }}</p></div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="extraModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Extra</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-8">{{ recordItem.comment }} 总支出</div>
                        <div class="col-4">{{ recordItem.value }}</div>
                    </div>
                    <div class="row">
                        <div class="col-12">{{ recordItem.record_date }}</div>
                    </div>
                    <div class="row" style="margin-top: 5%">
                        <div class="col-12">
                            <div v-for="(extra, index) in extras" class="row" style="margin-top: 5%">
                                <div class="col-12">
                                    <div class="row">
                                        <div class="col-8">{{ extra.record_date }}</div>
                                        <div class="col-4">{{ extra.value }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12">{{ extra.comment }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 5%">
                        <div class="col-8">其他支出</div>
                        <div class="col-4">{{ left }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.slim.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.26.0/axios.min.js"></script>

<script src="https://cdn.staticfile.org/moment.js/2.29.1/moment.min.js"></script>
<script src="https://kit.fontawesome.com/e78d7410b3.js" crossorigin="anonymous"></script>
<script src="/js/bootstrap-datetimepicker.min.js"></script>

<script src="/js/env.js?v=1"></script>
<script src="/js/common.js?v=2"></script>
<script>
    // let serverData = {"list":[[{"day":null,"date":null,"items":[],"sum":null},{"day":1,"date":"2020-06-01","items":[{"id":"2071","record_id":"3","record_date":"2020-06-01","value":"199","comment":"招行信用卡","created_at":"1590984254","updated_at":"1590984254"}],"sum":"199"},{"day":2,"date":"2020-06-02","items":[{"id":"2072","record_id":"3","record_date":"2020-06-02","value":"300","comment":"微信零钱","created_at":"1591081400","updated_at":"1591081400"},{"id":"2076","record_id":"3","record_date":"2020-06-02","value":"-50","comment":"微信收电费","created_at":"1591149474","updated_at":"1591149474"},{"id":"2077","record_id":"3","record_date":"2020-06-02","value":"50","comment":"微信零钱","created_at":"1591149483","updated_at":"1591149483"}],"sum":"300"},{"day":3,"date":"2020-06-03","items":[],"sum":null},{"day":4,"date":"2020-06-04","items":[],"sum":null},{"day":5,"date":"2020-06-05","items":[],"sum":null},{"day":6,"date":"2020-06-06","items":[],"sum":null}],[{"day":7,"date":"2020-06-07","items":[{"id":"2082","record_id":"3","record_date":"2020-06-07","value":"-840","comment":"团建报销","created_at":"1591542348","updated_at":"1591542348"}],"sum":"-840"},{"day":8,"date":"2020-06-08","items":[{"id":"2084","record_id":"3","record_date":"2020-06-08","value":"2805","comment":"花呗","created_at":"1591582043","updated_at":"1591582043"},{"id":"2085","record_id":"3","record_date":"2020-06-08","value":"-505","comment":"余额宝还花呗","created_at":"1591582078","updated_at":"1591582078"}],"sum":"2300"},{"day":9,"date":"2020-06-09","items":[],"sum":null},{"day":10,"date":"2020-06-10","items":[{"id":"2092","record_id":"3","record_date":"2020-06-10","value":"50000","comment":"给家里","created_at":"1591793152","updated_at":"1591793152"}],"sum":"50000"},{"day":11,"date":"2020-06-11","items":[],"sum":null},{"day":12,"date":"2020-06-12","items":[],"sum":null},{"day":13,"date":"2020-06-13","items":[{"id":"2097","record_id":"3","record_date":"2020-06-13","value":"115","comment":"京东白条","created_at":"1592019117","updated_at":"1592019117"}],"sum":"115"}],[{"day":14,"date":"2020-06-14","items":[],"sum":null},{"day":15,"date":"2020-06-15","items":[],"sum":null},{"day":16,"date":"2020-06-16","items":[{"id":"2105","record_id":"3","record_date":"2020-06-16","value":"-110","comment":"咸鱼卖掉小米蓝牙耳机","created_at":"1592305217","updated_at":"1592305224"},{"id":"2106","record_id":"3","record_date":"2020-06-16","value":"110","comment":"余额宝","created_at":"1592305261","updated_at":"1592305261"}],"sum":"0"},{"day":17,"date":"2020-06-17","items":[],"sum":null},{"day":18,"date":"2020-06-18","items":[],"sum":null},{"day":19,"date":"2020-06-19","items":[],"sum":null},{"day":20,"date":"2020-06-20","items":[],"sum":null}],[{"day":21,"date":"2020-06-21","items":[],"sum":null},{"day":22,"date":"2020-06-22","items":[],"sum":null},{"day":23,"date":"2020-06-23","items":[{"id":"2117","record_id":"3","record_date":"2020-06-23","value":"-50","comment":"微信收电费","created_at":"1592921312","updated_at":"1592921320"},{"id":"2118","record_id":"3","record_date":"2020-06-23","value":"50","comment":"微信零钱","created_at":"1592921325","updated_at":"1592921325"}],"sum":"0"},{"day":24,"date":"2020-06-24","items":[{"id":"2120","record_id":"3","record_date":"2020-06-24","value":"300","comment":"微信零钱","created_at":"1592964997","updated_at":"1592964997"}],"sum":"300"},{"day":25,"date":"2020-06-25","items":[],"sum":null},{"day":26,"date":"2020-06-26","items":[],"sum":null},{"day":27,"date":"2020-06-27","items":[],"sum":null}],[{"day":28,"date":"2020-06-28","items":[{"id":"2126","record_id":"3","record_date":"2020-06-28","value":"3615","comment":"房贷","created_at":"1593310657","updated_at":"1593310657"}],"sum":"3615"},{"day":29,"date":"2020-06-29","items":[{"id":"2129","record_id":"3","record_date":"2020-06-29","value":"-300","comment":"礼物公司报销","created_at":"1593418726","updated_at":"1593418726"},{"id":"2134","record_id":"3","record_date":"2020-06-29","value":"300","comment":"余额宝","created_at":"1593565877","updated_at":"1593565877"}],"sum":"0"},{"day":30,"date":"2020-06-30","items":[],"sum":null},{"day":null,"date":null,"items":[],"sum":null},{"day":null,"date":null,"items":[],"sum":null},{"day":null,"date":null,"items":[],"sum":null},{"day":null,"date":null,"items":[],"sum":null}]],"record_date":"2020-06-11","record":{"id":3,"name":"支出","allow_cumulate":1},"day_index":4,"week_index":1};
    // let vm = initVueApp();
    // initApp();

    let serverData, vm;
    axios.get(env.apiPrefix + '/records/month', {params: buildParams(["record_id", "record_date"])})
        .then(function (response) {
            if (response.data.code) {
                return;
            }
            serverData = response.data.data;
            vm = initVueApp();
            initApp();
        });

    function initVueApp() {
        return new Vue({
            el: '#app-main',
            data: {
                record: serverData.record,
                month: serverData.list,
                weekIndex: serverData.week_index,
                dayIndex: serverData.day_index,
                recordDate: serverData.record_date,
                recordItem: {
                    value: null,
                    comment: null,
                    record_date: null
                },
                extras: [],
                left: null
            },
            methods: {
                clickDay: function (weekIndex, dayIndex) {
                    this.weekIndex = weekIndex;
                    this.dayIndex = dayIndex;
                    this.recordDate = this.month[weekIndex][dayIndex].date;
                },
                goWeek: function () {
                    window.location.href = generateUrl('/record/week.html', {record_id: vm.record.id, record_date: vm.recordDate});
                },
                goYear: function () {
                    window.location.href = generateUrl('/record/analysis/line-single.html', {record_id: vm.record.id, record_date: vm.recordDate});
                },
                monthOffset: function (offset) {
                    var requestData = {
                        record_id: this.record.id,
                        record_date: this.recordDate,
                        month_offset: offset
                    };

                    axios.get(generateUrl('/records/month', {}, env.apiPrefix), {params: requestData})
                        .then(function (response) {
                            if (response.data.code) {
                                return;
                            }

                            vm.month = response.data.data.list;
                            vm.dayIndex = response.data.data.day_index;
                            vm.weekIndex = response.data.data.week_index;
                            vm.recordDate = response.data.data.record_date;
                        });
                },
                clickModal: function (recordItemId) {
                    axios.get(env.apiPrefix + '/record-item-extras', {params: {record_item_id: recordItemId}})
                        .then(function (response) {
                            if (response.data.code) {
                                return;
                            }
                            vm.recordItem = response.data.data.record_item;
                            vm.extras = response.data.data.extras;
                            vm.left = getLeft(vm.recordItem.value, vm.extras);

                            $('#extraModal').modal("show");
                        });
                }
            }
        });
    }

    function initApp() {
        $(function () {
            $('#date').datetimepicker(
                {
                    format: 'YYYY-MM-DD',
                    defaultDate: vm.recordDate,
                    locale: 'zh-tw',
                    ignoreReadonly: true
                }
            ).on('dp.change', function (e) {
                if (e.date) {
                    if (e.date.format('M') == e.oldDate.format('M')) {
                        vm.recordDate = e.date.format('YYYY-MM-DD');
                        vm.weekIndex = vm.weekIndex - (e.oldDate.format('W') - e.date.format('W'));
                        vm.dayIndex = e.date.format('e');
                        return;
                    }

                    let requestData = {
                        record_id: vm.record.id,
                        record_date: e.date.format('YYYY-MM-DD')
                    };

                    axios.get(generateUrl('/records/month', {}, env.apiPrefix), {params: requestData})
                        .then(function (response) {
                            if (response.data.code) {
                                return;
                            }

                            vm.month = response.data.data.list;
                            vm.dayIndex = response.data.data.day_index;
                            vm.weekIndex = response.data.data.week_index;
                            vm.recordDate = response.data.data.record_date;
                        });
                } else {
                    alert('Datetime Picker error!')
                }
            });
        });
    }
</script>
</body>
</html>
